<template>
  <!-- 顶部用户信息+功能按钮区 -->
  <view class="profile-header">
    <!-- 背景图（可选，已加透明度透出淡黄色） -->
    <image class="header-bg" src="/static/profile-bg-blur.png" mode="widthFix"></image>
    
    <!-- 用户信息（头像+昵称+登录按钮） -->
    <view class="user-info">
      <image class="avatar" src="/static/logo.png" mode="aspectFill"></image>
      <view class="user-text">
        <text class="greeting">Hi~欢迎回来</text>
        <button class="login-btn" @click="goLogin">登录</button>
      </view>
    </view>
    
    <!-- 数据统计（关注/话题） -->
    <view class="stats-bar">
      <text class="stat-item">关注3</text>
      <text class="divider">|</text>
      <text class="stat-item">话题0</text>
    </view>
    
    <!-- 功能按钮（收藏/动态/设置） -->
    <view class="func-buttons">
      <view class="func-btn" @click="goCollect">
        <image class="btn-icon" src="/static/daohang/shoucang.png"></image>
        <text class="btn-text">收藏</text>
      </view>
      <view class="func-btn" @click="goDynamic">
        <image class="btn-icon" src="/static/daohang/lishi.png"></image>
        <text class="btn-text">动态</text>
      </view>
      <view class="func-btn" @click="goSetting">
        <image class="btn-icon" src="/static/daohang/shezhi.png"></image>
        <text class="btn-text">设置</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    // 跳转登录页
    goLogin() {
      uni.navigateTo({ url: "/pages/login/login" });
    },
    // 进入收藏页面
    goCollect() {
      uni.showToast({ title: "进入收藏页面", icon: "none" });
    },
    // 进入动态页面
    goDynamic() {
      uni.showToast({ title: "进入动态页面", icon: "none" });
    },
    // 跳转设置页
    goSetting() {
      uni.navigateTo({ url: "/pages/setting/setting" });
    }
  }
};
</script>

<style scoped>
/* 顶部区域容器（整体淡黄色背景） */
.profile-header {
  position: relative;
  background-color: #FFF8E1; /* 柔和淡黄色，可根据需求调整色值 */
}

/* 背景图（加透明度，让淡黄色底色透出，若不需要背景图可直接删除该标签） */
.header-bg {
  width: 100%;
  height: 180rpx;
  object-fit: cover;
  opacity: 0.8; /* 透明度0-1，数值越小底色越明显 */
}

/* 用户信息区布局 */
.user-info {
  position: absolute;
  top: 60rpx;
  left: 40rpx;
  display: flex;
  align-items: center;
}

/* 头像样式 */
.avatar {
  width: 90rpx;
  height: 90rpx;
  border-radius: 50%;
  border: 3rpx solid #fff; /* 白色边框突出头像 */
}

/* 用户文字区域 */
.user-text {
  margin-left: 20rpx;
}

/* 欢迎语 */
.greeting {
  font-size: 32rpx;
  color: #333; /* 深色文字搭配淡黄色背景，提高可读性 */
  display: block;
  font-weight: 500;
}

/* 登录按钮 */
.login-btn {
  margin-top: 8rpx;
  padding: 6rpx 22rpx;
  font-size: 24rpx;
  color: #fff;
  background-color: #ff6600; /* 橙色按钮突出交互 */
  border-radius: 20rpx;
  line-height: 1.2;
}

/* 数据统计栏 */
.stats-bar {
  display: flex;
  justify-content: center;
  gap: 20rpx;
  padding: 15rpx 0;
  font-size: 28rpx;
  color: #333; /* 深色文字适配淡黄色背景 */
}

/* 分割线 */
.divider {
  color: #ccc; /* 浅灰色分割线，不突兀 */
}

/* 功能按钮区 */
.func-buttons {
  display: flex;
  justify-content: space-around;
  padding: 20rpx 0;
  border-top: 1px solid #f0e6d2; /* 淡色边框，适配淡黄色背景 */
}

/* 单个功能按钮 */
.func-btn {
  text-align: center;
}

/* 功能按钮图标 */
.btn-icon {
  width: 56rpx;
  height: 56rpx;
}

/* 功能按钮文字 */
.btn-text {
  font-size: 24rpx;
  color: #666; /* 中深色文字，避免过浅看不清 */
  margin-top: 8rpx;
  display: block;
}
</style>